<template>
	<view class="page">
		<view class="items">
			<view class="name md2Title">
				头像
			</view>
			
			<view class="photo" @click="changePhoto">
				<image src="../../../static/imgs/detail/gao.png" mode=""></image>
			</view>
		</view>
		
		<view class="items" @click="changeName">
			<view class="left">
				<view class="type md4Text">
					姓名
				</view>
				
				<view class="name name md2Title">
					孙徐欢
				</view>
			</view>
			
			<view class="right">
				<image src="../../../static/imgs/right.png" mode=""></image>
			</view>
		</view>
		
		<view class="items" @click="changeSex">
			<view class="left">
				<view class="type md4Text">
					性别
				</view>
				
				<view class="name name md2Title">
					{{currentSex}}
				</view>
			</view>
			
			<view class="right" @click="changeSex">
				<image src="../../../static/imgs/right.png" mode=""></image>
			</view>
		</view>
		
		<view class="items" @click="changeWorkTime">
			<view class="left">
				<view class="type md4Text">
					参加工作时间
				</view>
				
				<view class="name name md2Title">
					{{currentTime}}
				</view>
			</view>
			
			<view class="right">
				<image src="../../../static/imgs/right.png" mode=""></image>
			</view>
		</view>
		
		<view class="items">
			<view class="left">
				<view class="type md4Text">
					出生年月
				</view>
				
				<view class="name name md2Title">
					2017-04
				</view>
			</view>
			
			<view class="right">
				<image src="../../../static/imgs/right.png" mode=""></image>
			</view>
		</view>
		
		<mask-page v-if="isShow"></mask-page>
		<view class="topBars" v-if="doit">
			<top-btn :name='photo' @editIt='doIt'></top-btn>
			<top-btn :name='image'  @editIt='doIt'></top-btn>
			<top-btn :name='cancel'  @editIt='doIt' style="color: #999999;"></top-btn>
		</view>
		<view class="topBars" v-if="isSex">
			<top-btn :name='male' @editIt='doIt'></top-btn>
			<top-btn :name='female'  @editIt='doIt'></top-btn>
			<top-btn :name='cancel' style="color: #999999;"  @editIt='doIt'></top-btn>
		</view>
		<work-time v-if="isWorkTime" @checkedTime="checkedTime" @changeValue = "changeValue"></work-time>
	</view>
</template>

<script>
import maskPage from '../../commponent/public/mask.vue';
import topBtn from '../../commponent/public/topBtn.vue';
import workTime from '../../commponent/user/workTime.vue';
export default {
	data() {
		return {
			isShow:false,
			doit:false,
			isSex:false,
			isWorkTime:false,
			currentSex:'女',
			currentTime:'2012-9',
			photo:'拍摄图片',
			image:'相册图片',
			cancel:'取消',
			male:'男',
			female:'女'
		};
	},

	methods: {
		changePhoto(){
			this.isShow=true;
			this.doit = true;
		},
		
		changeSex(){
			console.log('修改性别');
			this.isShow = true;
			this.isSex = true;
		},
		checkedTime(){
			this.isShow = false;
			this.isWorkTime = false;
		},
		changeWorkTime(){
			this.isShow = true;
			this.isWorkTime = true;
		},
		changeValue(data){
			this.currentTime = data.join("-")
		},
		
		changeName(){
			uni.navigateTo({
				url:'/pages/views/mine/nameEdit'
			})
		},
		doIt(data){
			console.log(data);
			if(data=="拍摄图片" || data=="相册图片"){
				uni.showToast({
					title:'该功能暂未开放',
					icon:'none'
				})
			}
			
			if(data=="男" || data=="女"){
				this.currentSex = data;
			}
			this.isShow = false;
			this.doit = false;
			this.isSex = false;
		}
	},
	
	components:{
		maskPage,
		topBtn,
		workTime
	}
};
</script>

<style scoped lang="less">
	.page{
		border-top: 2upx solid #e5e5e5;
		padding: 0 32upx;
		.items{
			width: 100%;
			height: 156upx;
			border-bottom: 2upx solid #e5e5e5;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20upx;
			.photo{
				image{
					width: 112upx;
					height: 112upx;
				}
			}
			.left{
				.name{
					font-weight: bold;
					margin-top: 30upx;
				}
			}
			.right{
				image{
					width: 48upx;
					height: 48upx;
				}
			}
		}
	}
	
	.topBars{
		position: fixed;
		bottom:0;
		z-index: 1200;
		border-radius: 40upx;
		overflow: hidden;
		background-color: #FFFFFF;
	}
</style>
